<%@ page contentType = "text/html;charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="/resources/knit/css/knit.css">
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="/resources/knit/js/html5shiv.js"></script>
    <script src="/resources/knit/js/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<div style="position:absolute;top:80px;overflow-y:scroll;overflow-x:hidden;bottom:0;width:100%;z-index:0;padding-bottom:35px">
<div class="list-group">  
	<c:forEach var="row" items="${rm.results}" varStatus="v">
	  <a href="#" data="${row[0]}" ondblclick="opendesc('${row[0]}');" onclick="openContents('${row[0]}')" class="list-group-item" style="font-size:11px">${row[0]}</a>
	</c:forEach>
</div>
</div>
<div id="wrap" style="padding-top:10px;position:fixed;backgroud-color:#ffffff">
<div class="btn-group" style="margin-left:10px;">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">DB Connect <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" style="z-index:99999999">
  <c:set var="connectionYN" value="N"/>
  	<c:forEach var="connection" items="${connections}">
  		<li><a href="/tablelist?dbid=${connection }">${connection}</a></li>
  		<c:set var="connectionYN" value="Y"/>
  	</c:forEach>
  	<c:if test="${connectionYN eq 'Y'}">
    <li class="divider"></li>
    </c:if>
    <c:forEach var="connection" items="${history}">
  		<li><a href="/tablelist?dbid=${connection }">${connection}</a></li>
  	</c:forEach>
  </ul>
</div>
<a id="connectButton" href="javascript:openConnectForm();" type="button" class="btn btn-danger btn-xs">+</a>

<form name="connectDB" action="/connect">
	<input type="hidden" name="phase" value="dev">

<div id="connectForm" class="panel" style="display:none;">
	 <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="bphase">dev <span class="caret"></span></button>
        <ul class="dropdown-menu pull-left">
          <li><a href="javascript:selectPhase('dev');">dev</a></li>
          <li><a href="javascript:selectPhase('alpha');">alpha</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input name="dbid" type="text" class="form-control">
       <span class="input-group-btn">
        <a href="javascript:connect();" class="btn btn-default" type="button">+</a>
      </span>
    </div><!-- /input-group -->
</div>
</form>
</div>

	
<div style="position:fixed;width:100%;background-color:#555555;opacity:0.9;bottom:0px" id="findPanel">
   <input id="filterw" type="text" class="form-control" style="border-color:rgb(204, 204, 204);background-color:#999999;opacity:0.9;color:#ffffff;font-weight: bold" onkeyup="filter();">
	  <span onclick="filterClean();" class="glyphicon glyphicon-remove form-control-feedback" style="margin-top:-25px;cursor:pointer;-webkit-font-smoothing: antialiased;box-sizing: border-box;color:#ffffff;display: block;font-family: 'Glyphicons Halflings';font-size: 12px;font-style: normal;font-weight: normal;height: 30px;line-height: 30px;;position: absolute;right: 0px;text-align: center;top: 24px;width: 30px;"></span>
</div>
<c:if test="${not empty dbid }">
<a href="/dbpm?dbid=${dbid}" style=";margin-left:10px;margin-right:10px;margin-top:41px" type="button" class="btn btn-success">${dbid}</a>
</c:if>


<form name="tabledesc" action="/tabledesc" target="result">
	<input type="hidden" name="table">
	<input type="hidden" name="dbid" value="${dbid}">
</form>

<form name="tableContents" action="/contents" target="result">
	<input type="hidden" name="table">
	<input type="hidden" name="dbid" value="${dbid}">
</form>

<c:if test="${not empty error}">
<script>
alert('db 프로퍼티 확인!');
</script>
</c:if>
<c:if test="${not empty dbid}">
<script>
parent.editor.exec.dbid.value = '${dbid}';
parent.document.title = '${dbid}';
</script>
</c:if>
<script src="/resources/knit/js/jquery.js"></script>
<script src="/resources/knit/js/knit.min.js"></script>
<script>
	function openConnectForm(){
		$('#connectForm').toggle();
		if($('#connectButton').html() == '+'){
			$('#connectButton').html('&times;');
		}else{
			$('#connectButton').html('+');
		}
	}
	
	function selectPhase(phase){
		document.connectDB.phase.value=phase;
		$('#bphase').html(phase + ' <span class="caret"></span>');
	}
	
	function connect(){
		document.connectDB.submit();
	}
	
	function opendesc(table){
		document.tabledesc.table.value = table;
		document.tabledesc.submit();
	}
	
	function openContents(table){
		document.tableContents.table.value = table;
		document.tableContents.submit();
	}
	function findOpen(){
		$('#findPanel').slideDown();
		$('#filterw').focus();
	}
	
	function filter(){
		var fw = $('#filterw').val();
		if(fw == ''){
			$('#filterw').val('');
			$('div.list-group>a').show();
			return;
		}
		$('div.list-group>a').hide();
		$('div.list-group>a[data*="' + fw.toLowerCase() +'"]').show();
		$('div.list-group>a[data*="' + fw.toUpperCase() +'"]').show();
	}
	
	function filterClean(){
		$('#filterw').val('');
		$('div.list-group>a').show();
	}
	
</script>
</body>
</html>
